.container {
  width: 300px;
  height: 140px;
  background: #FFF;
  display: flex;
  align-items: center;
  filter: contrast(30);
}

.circle {
  width: 50px;
  height: 60px;
  border-radius: 50%;
  position: absolute;
  filter: blur(20px);
  background: #0983d4;
  transform: scale(0.1);
  transform-origin: left top;
}
.circle {
  animation: move 4s cubic-bezier(.44, .79, .83, .96) infinite;
}

.circle_2 {
  animation-delay: 0.4s;
}

.circle_3 {
  animation-delay: 0.8s;
}

.circle_4 {
  animation-delay: 1.2s;
}

.circle_5 {
  animation-delay: 1.6s;
}

@keyframes move {

  //子元素的位移和尺寸动画
  0% {
    transform: translateX(20px) scale(0.3);
  }

  35% {
    transform: translateX(135px) scale(0.8);
  }
  55% {
    transform: translateX(160px) scale((0.7));
  }
  85% {
    transform: translateX(280px) scale(0.3);
  }
  100%{
    transform: translateX(20px) scale(0.1);
  }
}